﻿<template>
  <div class="index">
    <div class="index-logoimg"><img src="../src/assets/img/logo.png" alt=""></div>
    <div class="index-content">
      <div>
        <ul>
          <li @click="logotab(0)" :class="wchatlogo ? 'active':''">微信登录</li>
          <li @click="logotab(1)" :class="phonelogo ? 'active':''">手机登录</li>
        </ul>
        <form action="" v-if="phonelogo">
          <input type="tel" placeholder="手机号" id="phone" @blur="losekeyup(0)" v-model="phonenumber" autocomplete="off">
          <input type="tel" placeholder="验证码" id="yanzhen" @blur="losekeyup(1)" v-model="yanzhen">
          <span id="yanzhen_tip" v-if="yanzhenmatip">验证码不正确</span>
          <span id="click_yanzhen" @click="getcode()">{{clickgetyanzhenma}}</span>
          <input type="button" value="登录" @click="submits()">
        </form>
        <!-- <div v-if="wchatlogo"><img src="../src/assets/img/wechat.png" alt=""></div> -->
        <div v-if="wchatlogo" id="qrcode"><img src=""></div>
      </div>
    </div>
    <div class="index-footer">
      <p>梵响数据 长租公寓数字化服务商</p>
      <p>Copyright © 2018 梵响数据 版权所有</p>
      <p>陕ICP备15010962号 </p>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcode'
export default {
  name: 'Logo',
  data () {
    return {
      wchatlogo:false,    //控制微信或者手机号登录的显示与影藏
      phonelogo:true,
      phonenumber:'',      //输入的电话号码
      yanzhen:'',           //输入的验证码
      yanzhenmatip:false,     //验证码错误提示
      clickgetyanzhenma:'获取验证码',
      countdown:60

    }
  },

  methods:{
    logotab(tab) {
      console.log(tab)
      if(tab==0){
        this.wchatlogo=true;
        this.phonelogo=false;
      }else{
        this.wchatlogo=false;
        this.phonelogo=true;
      }
    },
    losekeyup(inputcount){
      console.log(inputcount)
      if(inputcount=='-1'){
         console.log(this.phonenumber)
      }else{
        console.log(this.yanzhen)
      }
    },
    getcode(){
        let that=this
        that.clickgetyanzhenma=that.countdown+'s之后再试';
        let time=setInterval(()=>{
          that.countdown--
          console.log(that.countdown)
          if(that.countdown=='-1'){
            clearInterval(time)
            that.clickgetyanzhenma='重发';
            that.countdown=10;
          }else{
            that.clickgetyanzhenma=that.countdown+'s之后再试';
          }
        },1000)
    },
    submits() {
      let that = this;
      if(that.phonenumber==''){
       alert("请输入电话号码")
      }else if(that.yanzhen==''){
        alert("请获取验证码")
      }
      else{
        sessionStorage.setItem('token',that.phonenumber)
        this.$router.push({name: 'StaffManagement'});
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  body{
    background:#242536;
  }
  .index{
    display:flex;
    padding-top:200px;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }
  .active{
    color:#00a69b!important;
  }
  .index-logoimg{
    width: 147px;
    height: 19px;
  }
  .index-logoimg img{
    width:100%;
    height:100%;
  }
  .index-content{
    margin-top:20px;
    margin-bottom:84px;
    background-color: #fff;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.13);
  }
  .index-content>div{
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  .index-content>div>ul{
    display:flex;
    justify-content: space-around;
    padding:21px 61px 0px;
  }
  .index-content>div>ul li{
    font-style: normal;
    color: #919191;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }
  .index-content>div>ul li:nth-child(1){
    margin-right: 35px;
  }
  .index-content>div>ul li:nth-child(2){
    margin-left: 35px;
  }
  .index-content>div>form{
    display:flex;
    flex-direction: column;
    padding:51px 61px 61px;
    align-items: center;
    position: relative;
  }
  .index-content>div>form input{
    width:192px;
    border: 0;
    border-bottom: solid 1px #979797;
    opacity: .4;
    padding:14px 0 10px 8px;
  }
  .index-content>div>form input:last-child{
    margin-top:42px;
    border-radius: 5px;
    border: 0;
    opacity:1;
    background-color: #00a69b;
    font-size: 14px;
    font-weight: 500;
    color:#fff;
    padding-left:0;
  }

  #yanzhen_tip{
    position: absolute;
    top:144px;
    left:68px;
    font-size:10px;
    color:#e968a2;
    -webkit-text-size-adjust:none

  }
  #click_yanzhen{
    position: absolute;
    top:112px;
    right:64px;
    height: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    color: #cdcdcd;
    cursor: pointer;
  }
  .index-content>div>div{
    width: 322px;
    height: 202px;
    padding:48px 0 27px;
  }
  .index-content>div>div img{
    width:174px;
    margin:0 auto;
    height:100%;
  }
  .index-footer{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .index-footer p:nth-child(1){
    font-family: PingFangSC;
    margin-bottom:16px;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
  }
  .index-footer p:nth-child(2){
    margin-bottom:10px;
  }
  .index-footer p:nth-child(2),.index-footer p:nth-child(3){
    font-family: PingFangSC;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
  }
</style>
